<template>
<!--  <el-button-->
<!--      v-loading.fullscreen.lock="fullscreenLoading"-->
<!--      type="primary"-->
<!--      @click="openFullScreen1"-->
<!--  >-->
<!--    As a directive-->
<!--  </el-button>-->
<!--  <el-button type="primary" @click="openFullScreen2"> As a service </el-button>-->
</template>

<script setup>
import {onMounted,watch} from 'vue'
import { ElLoading } from 'element-plus'

const props=defineProps({
  isLoading:{
    type:Boolean
  },
  text:{
    type:String,
    default:"Loading"
  }
})

let loadingRef=null

watch(
    () => props.isLoading,
    (newVal, oldVal) => {
      if(!newVal&&loadingRef){
         loadingRef.close()
      }else if(newVal){
        loadingRef = ElLoading.service({
          lock: true,
          text: props.text,
          background: 'rgba(0, 0, 0, 0.7)',
        })
      }
    }
)
onMounted(()=>{
})

</script>

<script>
 export default {
   name:"GuiguLoading"
 }
</script>